<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .site-nave {
            height: 30px;
            background-color: #ccc;
        }
        .top-banner {
            background-color: blue;
            opacity: 1;
        }
        .w {
            width: 1210px;
            height: 80px;
            background-color: yellowgreen;
            margin: 0 auto;
            position: relative;
            opacity: 1;
        }
        .search {
            width: 1210px;
            height: 80px;
            background-color: red;
            margin: 0 auto;
        }
        a {
            position: absolute;
            top:10px;
            right: 100px;
            width: 25px;
            height: 25px;
            background-color: white;
            color: green;
            line-height: 25px;
            text-align: center;
            text-decoration: none;
        }


    </style>
</head>
<body>
<div class="site-nave"></div>
<div class="top-banner" style="opacity: 1">
    <div class="w">
        <a href="#">X</a>
    </div>
</div>
<div class="search"></div>
</body>
<script>

    //1.获取事件源
    var topBaner = document.getElementsByClassName("top-banner")[0];
    var a = topBaner.children[0].firstElementChild || topBaner.children[0].firstChild ;

    //定义定时器

    //2.绑定事件
    a.onclick = function () {
        //3.书写事件驱动程序（定时器，透明度变为0，清除定时器，并隐藏盒子）
        var timer = setInterval(function () {
            topBaner.style.opacity -=0.1;
            console.log(1);
            if(topBaner.style.opacity<0){
                topBaner.style.display = "none";
                clearInterval(timer);
            }
        },50);
    }
</script>
</html>